<div class="arrow-block">
    <span class="back-icon margin-right-5px"><</span>
    <a class="pl-0" (click)="goBackPro()">{{
        'SIDE_NAV.PROJECTS' | translate
    }}</a>
    <span class="back-icon"><</span>
    <a (click)="goBackRep()">{{ projectName }}</a>
    <span class="back-icon"><</span>
    <a (click)="goBack()">{{ repositoryName }}</a>

    <span
        class="back-icon"
        *ngFor="let digest of referArtifactNameArray; let i = index">
        &lt;<a (click)="jumpDigest(i)">{{ digest | slice : 0 : 15 }}</a></span
    >
</div>

<div class="title-wrapper">
    <div class="title-block">
        <h2 class="custom-h2 center-align-items">
            <div
                class="artifact-icon clr-display-inline-block"
                *ngIf="artifact.icon">
                <img
                    *ngIf="getIcon(artifact.icon)"
                    class="artifact-icon"
                    [title]="artifact.type"
                    [src]="getIcon(artifact.icon)"
                    (error)="showDefaultIcon($event)" />
            </div>
            <span class="margin-left-10px">{{
                artifact?.digest | slice : 0 : 15
            }}</span>
            <clr-icon
                size="25"
                *ngIf="artifact?.references && artifact?.references?.length"
                class="icon-folder margin-left-10px"
                shape="folder"></clr-icon>
        </h2>
    </div>
</div>
<ng-container *ngIf="!loading">
    <!-- tags -->
    <artifact-tag
        [artifactDetails]="artifact"
        [projectName]="projectName"
        [isProxyCacheProject]="isProxyCacheProject"
        [projectId]="projectId"
        [repositoryName]="repositoryName"></artifact-tag>

    <!-- Overview -->
    <artifact-common-properties
        [artifactDetails]="artifact"></artifact-common-properties>

    <!-- Additions -->
    <artifact-additions
        [artifact]="artifact"
        [projectName]="projectName"
        [projectId]="projectId"
        [repoName]="repositoryName"
        [digest]="artifactDigest"
        [sbomDigest]="sbomDigest"
        [tab]="activeTab"
        [additionLinks]="artifact?.addition_links"></artifact-additions>
</ng-container>
<div *ngIf="loading" class="clr-row mt-3 center">
    <span class="spinner spinner-md"></span>
</div>
